<template>
  <div class="container">
  <h1>签到数据管理</h1>
  <el-table :data="signInFormData" style="width: 100%">
    <!-- <el-table-column prop="aid" label="活动id" width="100" /> -->
    <el-table-column prop="aname" label="活动名称" />
    <el-table-column prop="atype" label="活动类型" />
    <el-table-column prop="atime" label="活动时间" />
    <el-table-column label="操作" fixed="right" width="250">
      <template #default="scope">
        <router-link :to="getDetailRoute(scope.row.aid)" class="link-type">
          <el-button type="primary" size="small">查看数据</el-button>
        </router-link>

        <el-popconfirm
          title="确定要删除此签到表数据吗？"
          @confirm="() => handleDelete(scope.row.aid)"
        >
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  
    <router-view></router-view>
  
</div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import axiosInstance from '@/plugins/Axios.js';
import { ElMessage, ElPopconfirm } from 'element-plus';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();

// 响应式引用
const signInFormData = ref([]);

// 获取签到表数据
const fetchAttendanceList = async () => {
  try {
    const did = store.getters.CurrentUser.did;
    if (!did) {
      console.warn('当前用户未登录或登录信息尚未准备好');
      return;
    }
    const response = await axiosInstance.getDepartmentPbActivities(did);
    signInFormData.value = response.data;
  } catch (error) {
    console.error('获取签到表数据失败时出错:', error);
    ElMessage.error('获取签到表数据失败');
  }
};

// 页面加载时获取所有数据
onMounted(() => {
  fetchAttendanceList();
});

// 删除活动
const handleDelete = async (aid) => {
  try {
    await axiosInstance.deleteActivity(aid);
    ElMessage.success('活动删除成功');
    fetchAttendanceList(); // 刷新列表
  } catch (error) {
    console.error('删除活动失败:', error);
    ElMessage.error('删除活动失败');
  }
};

// 获取详情页面
const getDetailRoute = (aid) => ({
  name: 'ActivityDetail',
  params: { aid }, // 使用params传递ID
  props: true //在ActivityDetail组件中通过props获取aid
});
</script>

=

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Optionally, you can add some padding or margin */
.container > div {
  padding: 16px;
}
</style>